<template>
	<div class="view">
		<!-- 头部 -->
		<div class="header">
			<div class="h_exit" style="cursor: pointer;" @click="to_exit">
				<i class="i-20 i-exit i-mr-10"></i>返回上一页
			</div>
			<div class="h_title">目录管理</div>
		</div>
		<!-- 头部 end -->

		<!-- 主体部分 -->
		<div class="main">
			<div class="main_con" :style="{ height: height + 'px' }">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="通用信息" name="first">
						<div class="form-con">
							<el-form label-width="70px" :model="form" ref="form" :rules="rules">
								<el-form-item label="目录名称" prop="sort">
									<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.sort"
										style="width: 400px;">
									</el-input>

								</el-form-item>
								<el-form-item label="上级目录" prop="parentid">
									<el-cascader v-model="form.parentid" :options="sort_list" style="width: 400px;"
										:props="defaultprops">
									</el-cascader>
								</el-form-item>
								<!-- <el-form-item label="封面图">
									<div @click="uploadPicture('flagImg', '3')" v-if="!form.picdir">
										<el-upload :action="img_upload" list-type="picture-card" :auto-upload="false"
											:limit="1" :disabled="true">
											<i slot="default" class="el-icon-plus"></i>
											<div slot="file" slot-scope="{file}">
												<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl + form.picdir"
													alt="">
											</div>
										</el-upload>
									</div>
									<div class="img_box" v-else @click="uploadPicture('flagImg', '3')">
										<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl + form.picdir" alt="">
										<div class="img_tip">
											<div class="img_big" @click.stop="imgBig('3')">
												<i class="el-icon-zoom-in"></i>
											</div>
											<div class="img_remove" @click.stop="imgRemove('3')">
												<i class="el-icon-delete"></i>
											</div>
										</div>
									</div>
								</el-form-item> -->
							</el-form>
						</div>
					</el-tab-pane>
					<!-- <el-tab-pane label="SEO设置" name="second">
						<div class="form-con">
							<el-form label-width="70px" :model="form">
								<el-form-item label="网页标题">
									<el-input placeholder="请输入网页标题" v-model="form.webtitle" style="width: 400px;">
									</el-input>

								</el-form-item>
								<el-form-item label="关键词">
									<el-input placeholder="请输入关键词" v-model="form.keywords" style="width: 400px;">
									</el-input>
								</el-form-item>
								<el-form-item label="网页描述">
									<el-input type="textarea" :rows="5" placeholder="请输入网页描述" v-model="form.shorts"
										style="width: 400px;">
									</el-input>
								</el-form-item>
							</el-form>
						</div>
					</el-tab-pane> -->
					<!-- <el-tab-pane label="广告设置" name="third">
						<div class="form-con">
							<el-form label-width="70px" :model="form">
								<el-form-item label="头条个数">
									<el-input type="number" placeholder="请输入" v-model.number="form.numOne"
										style="width: 400px;">
									</el-input>
								</el-form-item>
								<el-form-item label="推荐个数">
									<el-input type="number" placeholder="请输入" v-model.number="form.numHot"
										style="width: 400px;">
									</el-input>
								</el-form-item>
								<el-form-item label="置顶个数">
									<el-input type="number" placeholder="请输入" v-model.number="form.numHead"
										style="width: 400px;">
									</el-input>
								</el-form-item>
								<el-form-item label="热点个数">
									<el-input type="number" placeholder="请输入" v-model.number="form.numRedian"
										style="width: 400px;">
									</el-input>
								</el-form-item>
							</el-form>
						</div>
					</el-tab-pane> -->
					<el-tab-pane label="其他信息" name="fourth">
						<div class="form-con">
							<el-form label-width="70px" :model="form">
								<!-- <el-form-item label="手机名称">
									<el-input type="textarea" :rows="5" placeholder="请输入" v-model="form.sortMobile"
										style="width: 400px;">
									</el-input>
								</el-form-item>
								<el-form-item label="排序依据">
									<el-input type="text" placeholder="请输入" v-model="form.orderby" style="width: 400px;">
									</el-input>
								</el-form-item> -->
								<el-form-item label="排序权重">
									<el-input type="number" placeholder="请输入" v-model.number="form.orderid"
										style="width: 400px;">
									</el-input>
								</el-form-item>
								<!-- <el-form-item label="每条页数">
									<el-input type="number" placeholder="请输入" v-model.number="form.pagecount"
										style="width: 400px;">
									</el-input>
								</el-form-item>
								<el-form-item label="外链">
									<el-input type="text" placeholder="请输入" v-model="form.url" style="width: 400px;">
									</el-input>
								</el-form-item> -->
							</el-form>
						</div>
					</el-tab-pane>
				</el-tabs>


				<div class="item_bottom">
					<el-button icon="el-icon-check" type="primary" size="medium" @click="submitForm('form')"
						:disabled="isAdd">完成,确认提交
					</el-button>
				</div>
			</div>
		</div>
		<!-- 主体部分 end -->

		<!-- 图片裁剪弹窗 -->
		<!-- <el-dialog title="裁切封面" :visible.sync="cropperModel" width="1120px" center :close-on-click-modal="false">
			<cropper-image :Name="cropperName" @uploadImgSuccess="handleUploadSuccess" ref="child" :mode="mode">
			</cropper-image>
		</el-dialog> -->

		<!--查看大封面-->
		<el-dialog title="查看大封面" :visible.sync="imgVisible" center :close-on-click-modal="false">
			<img :src="$api.imgUrl + imgName" v-if="imgVisible" style="width: 100%" alt="查看">
		</el-dialog>
		<input type="file" accept="image/*" style="position: absolute;z-index: -10;" ref="file" @change="fileChange">

	</div>
</template>

<script>
import CropperImage from "../../components/CropperImage.vue";
export default {
	data() {
		return {
			height: document.documentElement.clientHeight - 105,
			sort_list: [
				// {
				// 	cataid: "0",
				// 	sort: "一级目录",
				// 	parentid: 0,
				// }
			],
			defaultprops: {
				children: 'catalogTreeVos',
				label: 'sort',
				value: 'id',
				checkStrictly: true
			},
			rules: {
				parentid: [{
					required: true,
					message: '请选择上级目录',
					trigger: 'change'
				}],
				sort: [{
					required: true,
					message: '请输入目录名称',
					trigger: 'blur'
				}]
			},
			form: {
				sort: '',
				parentid: '',
				orderid: null,
			},

			name: this.$root.ptName,
			picdir: this.$root.ptPicdir,
			isAdd: false,
			activeName: "first",

			//裁切图片参数
			cropperModel: false,
			cropperName: '',
			imgName: '',
			imgVisible: false,
			mode: [240, 355],


			img_upload: "",
		}
	},
	components: {
		CropperImage
	},
	methods: {

		fileChange() {
			let file = this.$refs.file.files[0];
			let parma = new FormData();
			parma.append("file", file)
			this.$http({
				method: 'post',
				url: this.$api.uploadFile,
				data: parma
			}).then(res => {
				if (res.data) {
					this.form.picdir = res.data;
					this.$refs.file.value = "";
				}
			})
		},

		// 图片放大
		imgBig(type) {
			this.imgName = this.form.picdir
			this.imgVisible = true
		},

		// 图片删除
		imgRemove(type) {
			this.form.picdir = ""
		},

		// 图片上传
		uploadPicture(name, p_index) {
			this.$refs.file.click()
			// this.cropperName = name;
			// this.cropperModel = true;
			// this.$nextTick(() => {
			// 	this.$refs.child.clear()
			// })
		},

		//图片上传成功后
		handleUploadSuccess(data) {
			this.cropperModel = false;
			this.cropperName = '';
			this.form.picdir = data
		},

		// 退出登录
		loginSelect(val) {
			if (val == 'exit') {
				localStorage.removeItem('token')
				this.$router.push('/sign_in')
			}
		},
		// 返回上一页
		to_exit() {
			this.$router.go(-1)
		},

		// 加载目录列表
		data_init() {
			let that = this
			this.$http({
				'method': 'get',
				'url': this.$api.cataList
			}).then(res => {
				if (res.data.code == 20000) {
					let list = this.getTreeData(res.data.data.items)
					for (let i = 0; i < list.length; i++) {
						that.sort_list.push(list[i])
					}

				}
			})
		},


		// 筛选空列表
		getTreeData(data) {
			// 循环遍历json数据
			for (var i = 0; i < data.length; i++) {

				if (data[i].catalogTreeVos.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i].catalogTreeVos = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i].catalogTreeVos);
				}
			}
			return data;
		},

		// 上传
		upload() {
			this.$http({
				'method': 'post',
				'url': this.$api.cataAdd,
				data: { ...this.form, parentid: this.form.parentid[this.form.parentid.length - 1] }
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message({
						message: res.data.message,
						type: 'success'
					})
					this.$router.go(-1)
				} else {
					this.$message.error(res.data.message)
				}
				this.isAdd = false
			})

		},

		// 表单验证
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.isAdd = true
					this.upload()
				}
			});
		},

		// 获取父级id
		select(e) {
			this.form.parentid = e[e.length - 1]
		},

		getOrderid() {
			this.$http({
				url: this.$api.cataOrderId
			}).then(res => {
				if (res.data.code == 20000) {
					this.form.orderid = res.data.data.orderid
				}
			})
		}

	},
	created() {
		this.getOrderid()
		this.data_init()
	},
}
</script>

<style scoped>
@import url("../../assets/css/sortAdd.css");

.form-con {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-top: 10vh;
}

.h_user * {
	cursor: pointer;
}
</style>
